/*
 * Ext JS Library 2.2
 * Copyright(c) 2006-2008, Ext JS, LLC.
 * licensing@extjs.com
 * 
 * http://extjs.com/license
 */

Ext.onReady(function(){
	

        var wrapped = new Ext.Resizable('statistics', {
            wrap:true,
            pinned:true,
            minWidth:50,
            minHeight: 50,
            preserveRatio: true
        });

    var myData = [
        ['male',15,25.7,27.2,32],
        ['female',19.2,28.4,27.3,25]

    ];

    // example of custom renderer function
    function change(val){
        if(val > 0){
            return '<span style="color:green;">' + val + '</span>';
        }else if(val < 0){
            return '<span style="color:red;">' + val + '</span>';
        }
        return val;
    }

    // example of custom renderer function
    function pctChange(val){
        if(val > 0){
            return '<span style="color:green;">' + val + '</span>';
        }else if(val < 0){
            return '<span style="color:red;">' + val + '</span>';
        }
        return val;
    }
	//自定义的性别渲染器，如果是男，显示为绿色；如果是女，显示为红色
	function renderSex(value) {
	    if (value == 'male') {
	        return "<span style='color:green;font-weight:bold;'>男</span>";
	    } else {
	        return "<span style='color:red;font-weight:bold;'>女</span>";
	    }
	}
	

    // create the data store
    var store = new Ext.data.SimpleStore({
        fields: [
           {name: 'company'},
           {name: 'price', type: 'float'},
           {name: 'change', type: 'float'},
           {name: 'pctChange', type: 'float'},
           {name: 'lastChange', type: 'float'}
        ]
    });
	//数据进行初始化
    store.loadData(myData);

    // create the Grid
    var grid = new Ext.grid.GridPanel({
        store: store,
        columns: [
            {header: "性别",width:50, sortable: true,renderer: renderSex,  dataIndex: 'company'},
            {header: "自我关注取向", width: 175, sortable: true, dataIndex: 'price'},
            {header: "公正平等取向", width: 175, sortable: true, renderer: change,    dataIndex: 'change'},
            {header: "忠信宽容取向", width: 175, sortable: true, renderer: pctChange, dataIndex: 'pctChange'},
            {header: "目的效率取向", width: 175, sortable: true, dataIndex: 'lastChange',id:'lastcm'}
        ],
        stripeRows: true,
		enableDragDrop:true,
		animCollapse:true,
		draggable:true,//允许拖拽
        autoExpandColumn: 'lastcm',//默认填充表格中该行的剩余空间
        height:150,
        width:700,
        title:'不同性别北京青年的价值取向类型表'
    });

    grid.render('grid');

    grid.getSelectionModel().selectFirstRow();
});